<template>
    <div class="center">
        <div class="center-account-bg">
            <div class="center-account-wrap">
                <div class="center-account">
                    <div class="account-avatar">
                        <img :src="userInfo.avatar | staticSourceFilter">
                    </div>
                    <div class="account-msg">
                        <h3>{{userInfo.nickName}}</h3>
                        <div class="msg-wrap">
                            <div class="msg-item">
                                <i class="iconfont">&#xe629;</i>
                                <span>{{userInfo.levelName}}</span>
                            </div>
                            <div class="msg-item">
                                <i class="iconfont">&#xe650;</i>
                                <span>{{userInfo.levelValue}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="account-setting" @click="goto('/account')">
                        <i class="iconfont">&#xe7da;</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-packet">
            <div class="order-packet-item">
                <div class="item-left">
                    <div class="item-left-icon" @click="goto('/order?status=1')">
                        <i class="iconfont">&#xe683;</i>
                        <span>待收款</span>
                    </div>
                    <div class="item-left-icon" @click="goto('/order?status=2')">
                        <i class="iconfont">&#xe60c;</i>
                        <span>待收货</span>
                    </div>
                    <div class="item-left-icon" @click="goto('/evaluate')">
                        <i class="iconfont">&#xe665;</i>
                        <span>待评价</span>
                    </div>
                    <div class="item-left-icon">
                        <i class="iconfont">&#xe666;</i>
                        <span>售后/客服</span>
                    </div>
                </div>
                <div class="item-right" @click="goto('/order?status=0')">
                    <i class="iconfont">&#xe671;</i>
                    <span>订单</span>
                </div>
            </div>
            <div class="order-packet-item">
                <div class="item-left">
                    <div class="item-left-icon">
                        <label>{{account.peas}}</label>
                        <span>京豆</span>
                    </div>
                    <div class="item-left-icon">
                        <label>0</label>
                        <span>优惠券</span>
                    </div>
                    <div class="item-left-icon">
                        <label>0.00</label>
                        <span>借条</span>
                    </div>
                    <div class="item-left-icon">
                        <label>{{account.balance}}</label>
                        <span>我的金库</span>
                    </div>
                </div>
                <div class="item-right" @click="goto('/wallet')">
                    <i class="iconfont">&#xe602;</i>
                    <span>钱包</span>
                </div>
            </div>
        </div>
        <div class="my-data">
            <div class="data-item">
                <label>{{track.goods}}</label>
                <span>商品关注</span>
            </div>
            <div class="data-item">
                <label>0</label>
                <span>店铺关注</span>
            </div>
            <div class="data-item">
                <label>0</label>
                <span>内容关注</span>
            </div>
            <div class="data-item">
                <label>0</label>
                <span>浏览记录</span>
            </div>
        </div>
        <m-goods-group title="商城热卖">
            <div class="center-hot">
                <div class="hot-item" :key="k" v-for="(v,k) in hotList">
                    <m-goods-box
                            :options="v"
                            type="large"
                            @click.native="goto('/goods/' + v.id)">

                    </m-goods-box>
                </div>
            </div>
        </m-goods-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                hotList: [],
                account: {
                    balance: 0.00,
                    peas: 0
                },
                track: {
                    goods: 0
                }
            }
        },
        methods: {
            pageInfo() {
                const self = this;
                this.$httpAll.initCenterPage().then(res => {
                    if (res[0].success === true) {
                        self.account.peas = res[0].data.peas;
                        self.account.balance = res[0].data.balance;
                    }
                    if (res[1].success === true) {
                        self.track.goods = res[1].data.goods;
                    }
                    if (res[2].success === true) {
                        self.hotList = res[2].data;
                    }
                }, error => {})
            }
        },
        created() {
            this.pageInfo();
        }
    }
</script>

<style lang="less" scoped>
    .center {
        display: flex;
        flex-direction: column;
        .center-account-bg {
            background: #fff;
            overflow-x: hidden;
            .center-account-wrap {
                flex-basis: 100px;
                margin: 0px -25%;
                padding: 0px 25% 15px 25%;
                border-radius: 0px 0px 50% 50%;
                background: linear-gradient(90deg, #eb3c3c, #ff7459);
                .center-account {
                    position: relative;
                    display: flex;
                    .account-avatar {
                        flex-basis: 100px;
                        height: 100px;
                        line-height: 100px;
                        img {
                            width: 70px;
                            height: 70px;
                            margin-left: 20px;
                            border-radius: 70px;
                            border: 3px solid #fff;
                            vertical-align: middle;
                            background: #eee;
                        }
                    }
                    .account-msg {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        padding-left: 10px;
                        h3 {
                            flex: 1;
                            height: 50px;
                            line-height: 50px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        .msg-wrap {
                            display: flex;
                            flex: 1;
                            align-items: center;
                            .msg-item {
                                flex-grow: 0;
                                display: flex;
                                padding: 0px 7px;
                                border: 1px solid white;
                                border-radius: 25px;
                                i {
                                    line-height: 20px;
                                    font-size: 18px;
                                }
                                span {
                                    line-height: 20px;
                                    font-size: 12px;
                                }
                                &:nth-child(even) {
                                    margin-left: 10px;
                                }
                            }
                        }
                    }
                    .account-setting {
                        position: absolute;
                        top: 50%;
                        right: 15px;
                        transform: translate(-50%, -50%);
                        i {
                            font-size: 20px;
                            color: #eee;
                        }
                    }
                }
            }
        }
        .order-packet {
            background: #fff;
            .order-packet-item {
                display: flex;
                padding: 3px 0px 10px 0px;
                box-shadow: 0px 1px 0px #eee;
                .item-left {
                    position: relative;
                    display: flex;
                    flex:1;
                    box-sizing: border-box;
                    padding-right: 5px;
                    border-right: 1px solid #eee;
                    .item-left-icon {
                        flex:1;
                        text-align: center;
                        i {
                            font-size: 20px;
                        }
                        label {
                            font-size: 16px;
                            font-weight: 600;
                        }
                        span {
                            display: block;
                            font-size: 14px;
                        }
                    }
                    &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        right: 0px;
                        transform: translate(100%, -50%);
                        width: 0px;
                        height: 0px;
                        border-top: 5px solid transparent;
                        border-left: 5px solid #eee;
                        border-bottom: 5px solid transparent;
                    }
                }
                .item-right {
                    flex-basis: 20%;
                    text-align: center;
                    i {
                        font-size: 20px;
                    }
                    span {
                        display: block;
                        font-size: 16px;
                    }
                }
            }
        }
        .my-data {
            display: flex;
            margin-top: 10px;
            background: #fff;
            .data-item {
                flex:1;
                padding: 10px 0px;
                text-align: center;
                label {
                    font-size: 18px;
                    color: #de181b;
                }
                span {
                    display: block;
                    font-size: 16px;
                }
            }
        }
        .center-hot{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            border-top: 5px solid #fbf9fe;
            .hot-item{
                box-sizing: border-box;
                flex-basis: 50%;
                flex-shrink: 0;
                border-bottom: 5px solid #fbf9fe;
                &:not(:nth-child(2)) {
                    border-right: 5px solid #fbf9fe;
                }
            }
        }
    }
</style>
